<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情信息</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 70px;
            line-height: 70px;
            text-align: center;
        }
        .avatar {
            width: 70px;
            height: 70px;
            display: block;
        }
        .el-row{
            height: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="mes" style="padding-left: 30px;padding-top: 10px">
        <template>
        <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
            <el-row class="el-row">
                <el-form-item label="用户名">
                    <span style="font-size: 20px;">{{formData.username}}</span>
                </el-form-item>
            </el-row>
            <el-divider content-position="right">用户名</el-divider>
            <el-row style="height: 100px">
                <el-form-item label="头像">
                    <img :src="imageUrl" style="width: 80px;height: 80px;"/>
                </el-form-item>
            </el-row>
            <el-divider content-position="right">头像</el-divider>
            <el-row class="el-row">
                <el-form-item label="性别">
                    <span style="font-size: 20px;">{{formData.sex}}</span>
                </el-form-item>
            </el-row>
            <el-divider content-position="right">性别</el-divider>
            <el-row class="el-row">
                <el-form-item label="手机号">
                    <span style="font-size: 20px;">{{formData.mobilephone}}</span>
                </el-form-item>
            </el-row>
            <el-divider content-position="right">手机号</el-divider>
            <el-row class="el-row">
                <el-form-item label="邮箱">
                    <span style="font-size: 20px;">{{formData.email}}</span>
                </el-form-item>
            </el-row>
            <el-divider content-position="right">邮箱</el-divider>
            <el-row class="el-row">
                <el-form-item label="学校">
                    <span style="font-size: 20px;">{{formData.school}}</span>
                </el-form-item>
            </el-row>
            <el-divider content-position="right">学校</el-divider>
        </el-form>
    </template>
    </div>
    <div slot="footer" class="dialog-footer" style="padding-left: 30px">
        <el-button type="primary" @click="EditMessage">编辑信息</el-button>
    </div>
    <!-- 编辑标签弹层 -->
    <div class="add-form">
        <el-dialog title="编辑" :visible.sync="dialogFormVisible4Edit">
                <template>
                    <el-tabs type="card">
                        <el-form ref="dataAddForm" :model="editData" :rules="rules" label-position="right" label-width="100px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="用户名" prop="username">
                                        <el-input v-model="editData.username"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="用户头像" prop="image">
                                        <el-upload
                                                class="avatar-uploader"
                                                action="/user/upload"
                                                :auto-upload="true"
                                                name="imgFile"
                                                :show-file-list="false"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过2048kb</div>
                                        </el-upload>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="性别" prop="sex">
                                        <el-radio v-model="editData.sex" label="男" border size="mini">男</el-radio>
                                        <el-radio v-model="editData.sex" label="女" border size="mini">女</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="学校" prop="school">
                                        <el-select v-model="editData.school" placeholder="请选择">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="邮箱" prop="email">
                                        <el-input v-model="editData.email"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="手机号" prop="mobilephone">
                                        <el-input v-model="editData.mobilephone"/>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                        </el-form>
                    </el-tabs>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handleEdit">编辑信息</el-button>
                </div>
        </el-dialog>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            imageUrl: "",
            dialogFormVisible4Edit: false,
            formData: {},
            editData: {},
            rules: {
                username: [{required: true, message: '用户名为必填项', trigger: 'blur'},
                    {min: 3, max: 10, message: '用户名长度在3-10个字符', trigger: 'blur'}],
                mobilephone: [{pattern: /^(1[34578]\d{9})$/, required: true, message: "请填入正确的手机号", trigger: 'blur'}],
                email: [{
                    pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
                    required: false,
                    message: "请填写正确的邮箱",
                    trigger: 'blur'
                }],
                image: [{required: true, message: '请上传图片'}],
                sex: [{required: true,message:'请选择性别'}]
            },
            options: [{
                value: '南阳理工学院',
                label: '南阳理工学院'
            }, {
                value: '南阳师范学院',
                label: '南阳师范学院'
            }, {
                value: '南阳医专',
                label: '南阳医专'
            }, {
                value: '南阳工程技术学院',
                label: '南阳工程技术学院'
            }
            ]
        },
        created() {
            this.findmessage();
        },
        methods: {
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) {
                this.imageUrl = response.data;
                this.$message({
                    type: response.flag ? 'success' : 'error',
                    message: response.message
                })
                //设置form表单中的img数据，为后来提交到数据库做准备
                this.editData.uimage = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //获取登陆用户信息
            findmessage() {
                axios.post("/user/findNowUser").then((res) => {
                    if (res.data.flag) {
                        //查询成功
                        this.formData = res.data.data;
                        this.imageUrl = res.data.data.uimage;
                    } else {
                        //查询失败
                        this.$message.error(res.data.message);
                    }
                }).catch(() => {
                    this.$message.error("网络错误");
                })
            },
            //弹出编辑弹窗
            EditMessage() {
                this.dialogFormVisible4Edit = true;
                //回显信息
                this.oneData = this.formData;
                this.editData = JSON.parse(JSON.stringify(this.oneData));
            },
            //提交编辑信息
            handleEdit() {
                axios.post("/user/editmessage", this.editData).then((res) => {
                    if (res.data.flag) {
                        //成功
                        this.dialogFormVisible4Edit = false;
                        this.findmessage();
                        this.$message.success(res.data.message);
                    } else {
                        //失败
                        this.$message.error(res.data.message);
                    }
                }).catch(() => {
                    this.$message.error("更新信息失败");
                })
            }
        }

    })
</script>
</html>